<template>
  <div>
    <div class="box-bg">
      <div class="box-content">
        <div class="item-title"></div>
        <!--中教课-->
        <div v-if="normalData && normalData.chinese" class="content-item">
          <div class="content-item-title">
            <div class="item-title-bg">
              <span class="item-class-star item-class-star-left"></span>
              <div class="item-class-type"><span>中教课</span><i class="item-class-count"></i></div>
              <span class="item-class-star item-class-star-right"></span>
            </div>
          </div>
          <ul class="content-item-list">
            <li class="content-item-unit">
              <div class="item-unit-recoder">
                <div class="item-unit-number">{{normalData.chinese.sign}}</div>
                <div class="item-unit-total" v-if="normalData.chinese.maxsign">/{{ normalData.chinese.maxsign }}次</div>
              </div>
              <div class="item-unit-text">直播出勤</div>
            </li>
            <li class="content-item-unit">
              <div class="item-unit-recoder">
                <div class="item-unit-number">{{normalData.chinese.worksubmit}}</div>
                <div class="item-unit-total">/{{ normalData.chinese.maxworksubmit }}次</div>
              </div>
              <div class="item-unit-text">作业提交</div>
            </li>
            <li class="content-item-unit">
              <div class="item-unit-recoder">
                <div class="item-unit-number">{{normalData.chinese.workcorrect}}</div>
                <div class="item-unit-total">/{{ normalData.chinese.maxworkcorrect }}次</div>
              </div>
              <div class="item-unit-text">作业订正</div>
            </li>
            <li class="content-item-unit">
              <div class="item-unit-recoder">
                <div class="item-unit-number">{{normalData.chinese.speaktime}}</div>
                <div class="item-unit-total">/分钟</div>
              </div>
              <div class="item-unit-text">开口时长</div>
            </li>
          </ul>
        </div>
        <!--外教课-->
        <div v-if="normalData && normalData.foreign" class="content-item">
          <div class="content-item-title content-item-title-dark">
            <div class="item-title-bg">
              <span class="item-class-star item-class-star-left"></span>
              <div class="item-class-type"><span>外教课</span><i class="item-class-count"></i></div>
              <span class="item-class-star item-class-star-right"></span>
            </div>
          </div>
          <ul class="content-item-list">
            <li class="content-item-unit">
              <div class="item-unit-recoder">
                <div class="item-unit-number">{{normalData.foreign.sign}}</div>
                <div class="item-unit-total" v-if="normalData.foreign.maxsign">/{{normalData.foreign.maxsign}}次</div>
              </div>
              <div class="item-unit-text">直播出勤</div>
            </li>
            <li class="content-item-unit">
              <div class="item-unit-recoder">
                <div class="item-unit-number">{{normalData.foreign.worksubmit}}</div>
                <div class="item-unit-total">/{{normalData.foreign.maxworksubmit}}次</div>
              </div>
              <div class="item-unit-text">作业提交</div>
            </li>
            <li class="content-item-unit">
              <div class="item-unit-recoder">
                <div class="item-unit-number">{{normalData.foreign.workcorrect}}</div>
                <div class="item-unit-total">/{{normalData.foreign.maxworkcorrect}}次</div>
              </div>
              <div class="item-unit-text">作业订正</div>
            </li>
            <li class="content-item-unit">
              <div class="item-unit-recoder">
                <div class="item-unit-number">{{normalData.foreign.speaktime}}</div>
                <div class="item-unit-total">/分钟</div>
              </div>
              <div class="item-unit-text">开口时长</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['normalData']
  }
</script>
<style type="text/css" scoped>
  .item-unit-total {
    font-size: .2rem;
  }

  .item-unit-number {
    font-size: .44rem;
    line-height: .4rem;
    font-weight: 500;
  }

  .item-unit-text {
    font-size: .28rem;
    text-align: center;
    color: #222;
    font-weight: 500;
    margin-top: .1rem;
  }

  .content-item-unit:nth-of-type(4) .item-unit-recoder {
    background-color: #5995ef;
  }

  .content-item-unit:nth-of-type(3) .item-unit-recoder {
    background-color: #f67238;
  }

  .content-item-unit:nth-of-type(2) .item-unit-recoder {
    background-color: #7ed46a;
  }

  .item-unit-recoder {
    padding-top: .2rem;
    color: #fff;
    width: 1.08rem;
    height: 1.08rem;
    background-color: #f8be17;
    border-radius: 50%;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;

  }

  .content-item-unit {
    flex: 1;
    align-items: center;
  }

  .content-item-list {
    width: 100%;
    height: 1.48rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .item-class-type {
    font-weight: bolder;
    color: #f96900;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
  }

  .item-class-count {
    font-style: normal;
    display: inline-block;
    width: .58rem;
    height: .28rem;
    background: url('../assets/img/four.png') no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
  }

  .item-class-type > span {
    line-height: .48rem;
    font-size: .3rem;
    vertical-align: middle;
  }

  .item-class-star-right {
    right: .2rem;
  }

  .item-class-star-left {
    left: .2rem;
  }

  .item-class-star {
    position: absolute;
    top: .14rem;
    display: inline-block;
    width: .18rem;
    height: .18rem;
    background: url('../assets/img/star_o.png') no-repeat;
    background-size: 100% 100%;
  }

  .content-item-title-dark .item-title-bg {
    background-color: #ffe5d9;
    box-shadow: 0px 3px 0px -1px #ffba89;
  }

  .content-item-title-dark .item-class-count {
    background: url('../assets/img/eight.png') no-repeat;
    background-size: 100% 100%;
  }

  .item-title-bg {
    width: 2.8rem;
    height: .48rem;
    border-radius: .24rem;
    background-color: #fff3cb;
    box-shadow: 0px 3px 0px -1px #f5d887;
    box-sizing: border-box;
  }

  .content-item-title {
    position: relative;
    margin: .5rem auto .32rem;
    width: 2.8rem;
    height: .5rem;
    box-sizing: border-box;
  }

  .content-item {
    padding: 0 .2rem;
    font-size: .28rem;
    color: #222;
    box-sizing: border-box;
  }

  .item-title {
    margin: 0 auto;
    width: 4.9rem;
    height: .6rem;
    background: url('../assets/img/normal_title.png') no-repeat;
    background-size: 100% 100%;

  }

  .box-content {
    padding-top: .6rem;
  }

  .box-bg {
    width: 100%;
    height: 7.27rem;
    background: url('../assets/img/stage_bg.png') repeat .14rem 0;
    background-size: .22rem .22rem;
    box-sizing: border-box;
  }

</style>
